/* 
  学习目标：useEffect 在卸载时触发回调函数
*/
import React, { useState, useEffect } from 'react';

export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);

  return (
    <div>
      {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  //  👍 第一种写法，分开写
  useEffect(() => {
    console.log('挂载时执行');
  }, []);

  // // 卸载时
  useEffect(() => {
    // return 返回的返回，会在卸载时执行。
    return () => {
      console.log('组件 被卸载了');
    };
  }, []);

  // 第二种写法
  useEffect(() => {
    console.log('挂载时执行');

    // return 返回的返回，会在卸载时执行。
    return () => {
      console.log('组价被卸载');
    };
  }, []);

  return <div>我是子组件</div>;
}
